<template>
  <a-tabs :size="size">
    <a-tab-pane key="config" tab="配置">
      <a-form :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
        <a-row>
          <a-col :span="direction == 'bottom' ? 6 : 24" ref="value">
            <a-form-item label="节点名称">
              <a-input placeholder="请输入节点名称" :size="size" :defaultValue="cell.value" @change="(e) => (cell.value = e.target.value)" />
            </a-form-item>
          </a-col>
          <a-col :span="direction == 'bottom' ? 6 : 24">
            <a-form-item label="服务类型">
              <a-select
                    :size="size"
                    :defaultValue="getDefaultTypeValue()"
                    @change="(e) => changeTypeHandle(e)"
                  >
                    <template v-for="item in listOcr.list" :key="`${item.value}`">
                      <a-select-option :value="item.value">
                        {{ item.label }}
                      </a-select-option>
                    </template>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col v-if="urlShow" :span="direction == 'bottom' ? 6 : 24" ref="bytesOrUrl">
            <a-form-item label="服务地址">
              <a-input
                :size="size"
                :defaultValue="getCellValue(props, 'bytesOrUrl')"
                @change="(e) => setCellValue(props, 'bytesOrUrl', e)"
                placeholder="请输入服务地址"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-tab-pane>
  </a-tabs>
</template>

<script setup>
  import { ref, reactive, onMounted } from 'vue';
  import SpiderSelect from '../components/spiderSelect.vue';
  import { setCellValue, getCellValue } from '../utils/tools';
  import { loadOcrTypes } from '../design.api';
  const props = defineProps({
    direction: { type: String, default: 'bottom' },
    cell: { type: Object },
    editor: { type: Object },
  });
  const size = ref('small');
  const formItemLayout = reactive({
    labelCol: { span: 5 },
    wrapperCol: { span: 17 },
    colSpan: 8,
  });

  const value = ref();
  const listOcr = reactive({ list: [] });
  const bytesOrUrl = ref();
  const urlShow = ref(true);

  onMounted(() => {
    loadOcrTypes()
      .then((res) => {
        listOcr.list = res;
      })
      .catch(() => {
        listOcr.list = [];
      });
  });

  function getDefaultTypeValue(){
    const v = getCellValue(props, 'ocrId')
    urlShow.value = v != '0';
    return v;
  }

  function changeTypeHandle(v){
    urlShow.value = v != '0';
    setCellValue(props, 'ocrId', v)
  }

  defineExpose({
    value,
    listOcr,
    bytesOrUrl
  });
</script>

<style lang="less" scoped></style>
